<template>
	<div class="code-preview">
		<el-dialog v-model="dialogVisible" :width="width" :title="title">
			<el-tabs v-model="activeTab">
				<el-tab-pane v-for="(item, index) in code" :label="item.name" :name="`tab${index}`" :key="index">
					<div class="flex h-[50vh]">
						<el-scrollbar class="flex-1">
							<highlightjs autodetect :code="item.content" />
						</el-scrollbar>
						<div>
							<el-button @click="copyText(item.content)" type="primary" link>
								<template #icon>
									<icon name="el-icon-CopyDocument" />
								</template>
								复制
							</el-button>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import commonFunction from '/@/utils/commonFunction';

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: true,
	},
	code: {
		type: Array<any>,
		default: () => [],
	},
	title: {
		type: String,
		default: '代码预览',
	},
	width: {
		type: String,
		default: '80%',
	},
});

const emit = defineEmits<{
	(event: 'update:modelValue', value: boolean): void;
}>();

const { copyText } = commonFunction();

const activeTab = ref('tab0');

const dialogVisible = computed({
	get() {
		return props.modelValue;
	},
	set(value) {
		emit('update:modelValue', value);
	},
});
</script>
